<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="80px"
  (onSearch)="queryResetData($event)"
  (onReset)="queryResetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-4">
  <div class="oprea-wrap">
    <button
      nz-button
      nzType="primary"
      (click)="showModal(0)"
    >
      <i nz-icon nzType="plus" nzTheme="outline"></i>新增
    </button>

    <button
      nz-button
      nzType="primary"
      class="m-l-8"
      [nzLoading]="exportLoading"
      (click)="exportTable()"
    >
      <i nz-icon nzType="download" nzTheme="outline"></i>导出
    </button>
  </div>

  <div class="pagination-wrap-position p-t-15">
    <nz-table
      #basicTable
      nzTableLayout="fixed"
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="120px" nzLeft>状态</th>
          <th nzAlign="center" nzWidth="160px">机器编码</th>
          <th nzAlign="center" nzWidth="160px">序列号SN</th>
          <th nzAlign="center" nzWidth="160px">IMEI</th>

          <th nzAlign="center" nzWidth="120px">设备类型</th>
          <th nzAlign="center" nzWidth="120px">监管状态</th>
          <th nzAlign="center" nzWidth="160px">IMEI2</th>
          <th nzAlign="center" nzWidth="120px">出库类型</th>
          <th nzAlign="center" nzWidth="170px">保修开始时间</th>
          <th nzAlign="center" nzWidth="170px">保修结束时间</th>
          <th nzAlign="center" nzWidth="200px">关联单号</th>

          <th nzAlign="center" nzWidth="150px">品牌</th>
          <th nzAlign="center" nzWidth="150px">系列</th>
          <th nzAlign="center" nzWidth="150px">机型</th>
          <th nzAlign="center" nzWidth="140px">颜色</th>
          <th nzAlign="center" nzWidth="140px">内存</th>
          <th nzAlign="center" nzWidth="140px">采购价</th>
          <th nzAlign="center" nzWidth="180px">采购备注</th>
          <th nzAlign="center" nzWidth="180px">租机订单号</th>
          <th nzAlign="center" nzWidth="160px">租机发货单号</th>
          <th nzAlign="center" nzWidth="150px">租机用户名</th>
          <th nzAlign="center" nzWidth="150px">租机用户电话</th>
          <th nzAlign="center" nzWidth="180px">租机备注</th>
          <th nzAlign="center" nzWidth="170px">入库时间</th>
          <th nzAlign="center" nzWidth="170px">出库时间</th>
          <th nzAlign="center" nzWidth="180px">附件</th>
          <th nzAlign="center" nzWidth="170px">最后更新时间</th>
          <th nzAlign="center" nzWidth="180px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 状态 -->
          <td nzAlign="center" nzLeft>
            <span [ngStyle]="{'color': data?.status | rentplaneMachineStatus: 'color'}">
              {{ data?.status | rentplaneMachineStatus: 'label' }}
            </span>
          </td>
          <!-- 机器编码 -->
          <td nzAlign="center">{{ data?.equipmentCode || '-' }}</td>
          <!-- 序列号SN -->
          <td nzAlign="center">{{ data?.serialNumber || '-' }}</td>
          <!-- IMEI -->
          <td nzAlign="center">{{ data?.imei || '-' }}</td>
          <!-- 设备类型 -->
          <td nzAlign="center">{{ data.deviceTypeId | rentplaneDeviceType: 'label' }}</td>
          <!-- 监管状态 -->
          <td nzAlign="center">{{ data.isSupervised == 1 ? '是' : data.isSupervised == 0 ? '否' : '-' }}</td>
          <!-- IMEI2 -->
          <td nzAlign="center">{{ data.imei2 || '-' }}</td>
          <!-- 出库类型 -->
          <td nzAlign="center">{{ data.outType | rentplaneOutType: 'label' }}</td>
          <!-- 保修开始时间 -->
          <td nzAlign="center">{{ data.warrantyStartTime || '-' }}</td>
          <!-- 保修结束时间 -->
          <td nzAlign="center">{{ data.warrantyEndTime || '-' }}</td>
          <!-- 关联单号 -->
          <td nzAlign="center">{{ data.relationNo || '-' }}</td>
          <!-- 品牌 -->
          <td nzAlign="center">{{ data?.typeName || '-' }}</td>
          <!-- 系列 -->
          <td nzAlign="center">{{ data?.seriesName || '-' }}</td>
          <!-- 机型 -->
          <td nzAlign="center">{{ data?.modelName || '-' }}</td>
          <!-- 颜色 -->
          <td nzAlign="center">{{ data?.color || '-' }}</td>
          <!-- 内存 -->
          <td nzAlign="center">{{ data?.memory || '-' }}</td>
          <!-- 采购价 -->
          <td nzAlign="center">{{ data?.purchasePrice || '-' }}</td>
          <!-- 采购备注 -->
          <td nzAlign="center">{{ data?.purchaseBak || '-' }}</td>
          <!-- 租机订单号 -->
          <td nzAlign="center">{{ data?.rentOrderNo || '-' }}</td>
          <!-- 租机发货单号 -->
          <td nzAlign="center">{{ data?.rentShipNo || '-' }}</td>
          <!-- 租机用户名 -->
          <td nzAlign="center">{{ data?.rentUserName || '-' }}</td>
          <!-- 租机用户电话 -->
          <td nzAlign="center">{{ data?.rentUserPhone || '-' }}</td>
          <!-- 租机备注 -->
          <td nzAlign="center">{{ data?.rentBak || '-' }}</td>
          <!-- 入库时间 -->
          <td nzAlign="center">{{ data?.wtime || '-' }}</td>
          <!-- 出库时间 -->
          <td nzAlign="center">{{ data?.otime || '-' }}</td>
          <!-- 附件 -->
          <td nzAlign="center">
            <ul class="td-files" *ngIf="data?.attach">
              <li
                *ngFor="let item of data?.attachLists">
                <a
                  [href]="item.url"
                  [download]="item.name"
                  target="_blank">
                  {{ item.name }}
                  <i nz-icon nzType="download" nzTheme="outline"></i>
                </a>
              </li>
            </ul>
          </td>
          <!-- 最后更新时间 -->
          <td nzAlign="center">{{ data?.updateTime || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showModal(1, data)"
            >编辑</button>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showModal(2, data)"
            >复制</button>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="followModal(data)"
            >跟进</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- 跟进Component -->
<app-follow-up #followUpRef [initParams]="initParams" [ohterParams]="{ type: 1 }"></app-follow-up>

<!-- S 新增 & 编辑 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="600"
  [nzFooter]="null"
  [nzMaskClosable]="false"
  [(nzVisible)]="isVisible"
  [nzTitle]="modelType === 0 ? '新增' : (modelType === 1 ? '编辑' : '复制')"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-spin [nzSpinning]="isModalSpinning">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel" nzRequired>状态</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择状态!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择状态"
              formControlName="status">
              <nz-option
                *ngFor="let option of statusOptions"
                [nzLabel]="option.label"
                [nzValue]="option.value"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">机器编码</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入机器编码!">
            <input nz-input placeholder="请输入机器编码" formControlName="equipmentCode" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel" nzRequired>序列号SN</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入序列号SN!">
            <input nz-input placeholder="请输入序列号SN" formControlName="serialNumber" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">IMEI</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入IMEI!">
            <input nz-input placeholder="请输入IMEI" formControlName="imei" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">IMEI2</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <input nz-input placeholder="请输入IMEI2" formControlName="imei2" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel" nzRequired>设备类型</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择设备类型!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择设备类型"
              formControlName="deviceTypeId">
              <nz-option
                *ngFor="let option of deviceOptions"
                [nzLabel]="option.label"
                [nzValue]="option.value"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel" nzRequired>监管状态</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择监管状态!">
            <nz-radio-group formControlName="isSupervised">
              <label nz-radio [nzValue]="1">是</label>
              <label nz-radio [nzValue]="0">否</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">出库类型</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择出库类型"
              formControlName="outType">
              <nz-option
                *ngFor="let option of outOptions"
                [nzLabel]="option.label"
                [nzValue]="option.value"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">保修时间</nz-form-label>
          <nz-form-control [nzSpan]="9" nzErrorTip="请输入保修开始时间!">
            <div nz-row nzJustify="space-between">
              <nz-date-picker
                [nzDisabledDate]="disabledStartDate"
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                nzPlaceHolder="保修开始时间"
                formControlName="warrantyStartTime"
              ></nz-date-picker>
            </div>
          </nz-form-control>

          <nz-form-control [nzSpan]="9" nzOffset="1" nzErrorTip="请输入保修结束时间!">
            <div nz-row nzJustify="space-between">
              <nz-date-picker
                #endDatePicker
                [nzDisabledDate]="disabledEndDate"
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                nzPlaceHolder="保修结束时间"
                formControlName="warrantyEndTime"
              ></nz-date-picker>
            </div>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">关联单号</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <input nz-input placeholder="请输入关联单号" formControlName="relationNo" />
          </nz-form-control>
        </nz-form-item>

        <nz-divider nzDashed></nz-divider>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">品牌</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择品牌!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择品牌"
              formControlName="typeId"
              (ngModelChange)="brandModelChange($event)">
              <nz-option
                *ngFor="let option of brandOptions"
                [nzLabel]="option.name"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">系列</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择系列!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择系列"
              formControlName="seriesId"
              [nzDisabled]="!validateForm.value.typeId"
              (ngModelChange)="seriesModelChange($event)">
              <nz-option
                *ngFor="let option of seriesOptions"
                [nzLabel]="option.name"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">机型</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择机型!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择机型"
              formControlName="modelId"
              [nzDisabled]="!validateForm.value.seriesId"
              (ngModelChange)="modelModelChange($event)">
              <nz-option
                *ngFor="let option of modelOptions"
                [nzLabel]="option.name"
                [nzValue]="option.id"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">颜色</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择颜色!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择颜色"
              formControlName="color"
              [nzDisabled]="!validateForm.value.modelId">
              <nz-option
                *ngFor="let color of colorOptions"
                [nzLabel]="color"
                [nzValue]="color"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">内存</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择内存!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择内存"
              formControlName="memory"
              [nzDisabled]="!validateForm.value.modelId">
              <nz-option
                *ngFor="let memory of memoryOptions"
                [nzLabel]="memory"
                [nzValue]="memory"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-divider nzDashed></nz-divider>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">采购价</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入采购价!">
            <nz-input-number
              style="width: 50%;"
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="2"
              nzPlaceHolder="请输入采购价"
              formControlName="purchasePrice"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">采购备注</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea
                rows="3"
                maxlength="100"
                nz-input
                placeholder="请输入采购备注"
                formControlName="purchaseBak"
              ></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>

        <nz-divider nzDashed></nz-divider>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">租机订单号</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入租机订单号!">
            <input nz-input placeholder="请输入租机订单号" formControlName="rentOrderNo" />
          </nz-form-control>
        </nz-form-item>
        
        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">租机发货单号</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入租机发货单号!">
            <input nz-input placeholder="请输入租机发货单号" formControlName="rentShipNo" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">租机用户名</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入租机用户名!">
            <input nz-input placeholder="请输入租机用户名" formControlName="rentUserName" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">租机用户电话</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请输入租机用户电话!">
            <input nz-input placeholder="请输入租机用户电话" formControlName="rentUserPhone" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">租机备注</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea
                rows="3"
                maxlength="100"
                nz-input
                placeholder="请输入租机备注"
                formControlName="rentBak"
              ></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>

        <nz-divider nzDashed></nz-divider>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">入库时间</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择入库时间!">
            <nz-date-picker
              nzShowTime
              nzAllowClear
              nzFormat="yyyy-MM-dd HH:mm:ss"
              formControlName="wtime"
              (ngModelChange)="modalTimeChange($event, 'wtime')"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">出库时间</nz-form-label>
          <nz-form-control [nzSpan]="formControl" nzErrorTip="请选择出库时间!">
            <nz-date-picker
              nzShowTime
              nzAllowClear
              nzFormat="yyyy-MM-dd HH:mm:ss"
              formControlName="otime"
              (ngModelChange)="modalTimeChange($event, 'otime')"
            ></nz-date-picker>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="formLabel">附件</nz-form-label>
          <nz-form-control [nzSpan]="formControl">
            <nz-upload
              nzAction=""
              [nzShowUploadList]="false"
              (nzChange)="uploadHandleChange($event)"
            >
              <button nz-button [nzLoading]="uploadLoading">
                <i nz-icon nzType="upload"></i>
                上传
              </button>
            </nz-upload>

            <ul class="file-list-ul">
              <li *ngFor="let item of fileList; let index = index;">
                <span>{{ item.name }}</span>
                <i nz-icon nzType="delete" nzTheme="outline" (click)="deleFile(index)"></i>
              </li>
            </ul>
          </nz-form-control>
        </nz-form-item>
      </form>
      </nz-spin>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="submitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新增 & 编辑 Modal -->